<template>
  <div>
    <el-form ref="form" :model="menu" size="small" label-width="80px">
      <el-form-item label="按钮名称">
        <el-input v-model="menu.name"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader :props="cascadeprops"  @change="changeparent" :change-on-select="true" expand-trigger="hover" style="width: 100%"
                     :options="menus" v-model="parentids">
        </el-cascader>
      </el-form-item>
      <el-form-item label="授权标识">
        <el-input v-model="menu.perms"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Button",
    props: ["menu", "menus", "parentids"],
    methods:{
      changeparent(value){
        this.menu.parentId = value[value.length-1];
      }
    },
    data() {
      return {
        cascadeprops: {
          value: "id",
          label: "name",
          children: "children"
        }
      }
    }
  }
</script>

<style>

</style>
